<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            min-height: 200vh;
            margin: 0;
        }

        button {
            padding: .5em .7em;
            border: 1px solid #8d8d8d;
            background-color: white;
            font-size: 1em;
        }

        .top-banner {
            padding: 1em 0;
            background-color: #ffd698;
        }

        .top-banner-inner {
            width: 80%;
            max-width: 1000px;
            margin: 0 auto;
        }

        .model {
            display: none;
        }

        /* 打开模态框,用半透明的蒙层遮挡其他内容 */
        .model-backdrop {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0,0,0,0.5);
        }

        /* 模态框主体定位 */
        .model-body {
            position: fixed;
            top: 3em;
            bottom: 3em;
            right: 20%;
            left: 20%;
            padding: 2em 3em;
            background-color: white;
            overflow: auto;
        }

        .model-close {
            cursor: pointer;
            position: absolute;
            top: .3em;
            right: .3em;
            padding: .3em;
            /* 将关闭按钮设置为叉叉,需要先将按钮设置为小方形,将文字溢出并隐藏. */
            font-size: 2em;
            height: 1em;
            width: 1em;
            /* 规定文本首行缩进 */
            text-indent: 10em;
            overflow: hidden;
            border: 0;
        }

        /* 使用子伪元素设置内容为x,并将x固定到方框中间 */
        .model-close::after {
            position: absolute;
            line-height: .5;
            top: .2em;
            left: .1em;
            text-indent: 0;
            /* 乘号的unicode编码 */
            content: "\00D7";
        }

        .container {
            width: 80%;
            max-width: 1000px;
            margin: 1em auto;
        }

        .dropdown {
            display: inline-block;
            position: relative;
        }

        .dropdown-label {
            /* 增加右侧内边距,给下拉箭头留出空间 */
            padding: .5em 2em .5em 1.5em;
            border: 1px solid #ccc;
            background-color: #eee;
        }

        .dropdown-label::after {
            content: '';
            position: absolute;
            /* 在标签的右侧定位元素 */
            right: 1em;
            top: 1em;
            border: .3em solid;
            border-color: black transparent transparent;
        }

        .dropdown:hover .dropdown-label::after {
            top: .7em;
            border-color: transparent transparent black;
        }


        .dropdown-menu {
            /* 先隐藏菜单 */
            display: none;
            /* 将菜单移动到下拉菜单下 */
            position: absolute;
            left: 0;
            top: 2.1em;
            min-width: 100%;
            background-color: #eee;
        }

        /* 鼠标悬停时显示菜单 */
        .dropdown:hover .dropdown-menu {
            display: block;
        }

        .submenu {
            padding-left: 0;
            margin: 0;
            list-style-type: none;
            border: 1px solid #999;
        }

        .submenu > li + li {
            border-top: 1px solid #999;
        }

        .submenu > li > a {
            display: block;
            padding: .5em 1.5em;
            background-color: #eee;
            color: #369;
            text-decoration: none;
        }

        .submenu > li > a:hover {
            background-color: #fff;
        }

    </style>
</head>
<body>
    <header class="top-banner">
        <div class="top-banner-inner">
            <p>Find Out aaa bbb ccc ddd eeef fff.Sign up For:
                <button id="open">Sign Up</button>
            </p>
        </div>
    </header>
    <div class="model" id="model">
        <div class="model-backdrop">
        </div>
        <div class="model-body">
            <button class="model-close" id="close">close</button>
            <h2>Wombat Newsletter</h2>
            <p>
                Sign up XXXXXXXXXXXXXXXXXXX
            </p>
            <form action="">
                <p>
                    <lebel for="email">Emaiil Address</lebel>
                    <input type="text" name="email">
                </p>
                <p><button type="submit">Submit</button></p>
            </form>
        </div>
    </div>
    <div class="container">
        <nav>
            <div class="dropdown">
                <!-- 使用相对定位完成一个下拉框 -->
                <div class="dropdown-label">Main Menu</div>
                <div class="dropdown-menu">
                    <ul class="submenu">
                        <li><a href="/">Home</a></li>
                        <li><a href="/coffees">Coffees</a></li>
                        <li><a href="/brewers">Brewers</a></li>
                        <li><a href="/specials">Specials</a></li>
                        <li><a href="/about">About us</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <h1>Wombot Coffee Roaster</h1>
    </div>
    <script type="text/javascript">
        var button = document.getElementById('open');
        var close = document.getElementById('close');
        var model = document.getElementById('model');

        button.addEventListener('click', function(e) {
            e.preventDefault();
            model.style.display = 'block';
        });

        close.addEventListener('click', function(e) {
            e.preventDefault();
            model.style.display = 'none';
        });
    </script>
</body>
</html>